本阶段优化概览
在进入新功能开发之前，先对已有应用进行一轮优化，涵盖以下方面：
1. 菜单高亮状态持久化
左侧菜单按钮选中后显示高亮状态，页面刷新后该状态依然保持。实现方式是将激活菜单项的路径存储在 URL 或状态管理中，结合路由信息恢复高亮状态。
2. 主题颜色全局联动
之前主题设置的颜色没有与全局主题色关联。优化后，修改主题色时，所有组件（按钮、菜单、链接等）的颜色都会统一变化。这需要在 Element Plus 的 CSS 变量层面进行覆盖：
:root {
--el-color-primary: var(--theme-color);
/* 自动生成各色阶 */
--el-color-primary-light-3: /* 计算得出 */;
--el-color-primary-dark-2: /* 计算得出 */;
}
css
3. 面包屑导航与过渡效果
头部区域加入面包屑组件，基于 Element Plus 的 el-breadcrumb 组件封装。点击左侧菜单时，面包屑同步更新，并带有过渡动画效果。
4. 标签页（Tabs）导航
面包屑下方加入类似浏览器标签页的导航功能：
- 点击标签页切换页面，左侧菜单高亮同步更新
- 页面切换带有过渡效果
- 结合 Vue 的
keep-alive缓存组件状态，减少重复渲染
5. keep-alive 注意事项
使用 keep-alive 缓存动态组件时需要注意：
- 被缓存的组件会保持在内存中，不会被销毁
- 通过 Vue DevTools 可以看到多个
inactive状态的组件实例 - 页面组件过多时，缓存会占用内存，需要在性能和体验之间取舍
- 某些副作用（定时器、事件监听）需要在
onDeactivated中清理
后续学习路径
本阶段优化完成后，基础样式页面（用户管理、角色菜单等）将以代码形式直接提供，不再逐行讲解。后续重点转向：
- 项目打包优化 -- 代码分割、CDN 加载、CSS 优化
- 性能优化 -- 懒加载、预加载、缓存策略
- 单元测试 -- Vitest 组件测试
- 端到端测试 -- Playwright/Cypress
- CI/CD 流程 -- 自动化构建与部署
↑